import React from 'react'
import styles from './index.module.scss'
import { Flex } from 'antd-mobile'
import classNames from 'classnames'

// 条件筛选栏标题数组：
const titleList = [
  { title: '区域', type: 'area' },
  { title: '方式', type: 'mode' },
  { title: '租金', type: 'price' },
  { title: '筛选', type: 'more' },
]

class FilterTitle extends React.Component {
  handleItemClick(type) {
    this.props.changeType(type)
  }
  render() {
    const { titleSelectedStatus } = this.props
    return (
      <Flex className={styles['filter-title']}>
        {titleList.map((item) => (
          <Flex.Item
            key={item.type}
            onClick={this.handleItemClick.bind(this, item.type)}
          >
            <span
              className={classNames('dropdown', {
                selected: titleSelectedStatus[item.type],
              })}
            >
              <span>{item.title}</span>
              <i className="iconfont icon-arrow" />
            </span>
          </Flex.Item>
        ))}
      </Flex>
    )
  }
}

export default FilterTitle
